<template>
  <div class="favorable">
      <div class="header">
      <x-header title="分时优惠" :left-options="{backText:''}">
      
      </x-header>
      <div class="navBar">
        <div class="allItem">
          <div class="item" v-for="(item,index) in pages" :class="{active:(index-1)==currentIndex}" @click="selectTime($event,index,item.time,item.year)">
            <div class="itemBox">
              <p>{{item.time}}</p>
              <p>{{item.week}}</p>
            </div>
          </div>
        </div>
      </div>
      </div>
      <div class="allStore">
          <div class="Store" v-for="item in allfenshiM" v-if='item.scheduleArray.length>0'><!-- 循环4S店 -->
            <div class="storeMess">
              <img :src="item.SHOP_PHOTO" alt="" />
              <div class="storeIntro">
                <h2>{{item.SHOP_NAME}}</h2>
                <p class="storeAddress">{{item.SHOP_ADDRESS}}</p>
                <p class="storePrice"><em>&yen; </em>{{item.TOTAL_PRICE}}</p>
              </div>
            </div>
            <ul>
              <li v-for="items in item.scheduleArray"><!-- 循环下单时间 -->
                <div class="timeMes">
                  <p class="time">{{items.STARTTIME | filterTime}}-{{items.ENDTIME | filterTime}}</p>
                  <p class="stock" v-if="items.PRICE>0" @click='workHours'>准时到店可获得<span>{{items.PRICE}}</span>元工时劵</p>
                </div>
                <div class="downOrder">
                  <!-- <router-link to="/pay"> -->
                    <button class="past" v-if="new Date().getTime()>items.ENDTIME">已过期</button>
                    <!-- Order（店id，项目id 支付的时候传这个id，店名，选中喷漆部位数组，优惠金额） -->
                    <button v-if="new Date().getTime()<items.ENDTIME" @click='downOrder(item,items)'>下单</button>
                  <!-- </router-link> -->
                </div>           
              </li> 
            </ul>
          </div>
      </div>
      <x-dialog v-model="showDiaLog" class="dialog-demo" hide-on-blur>
        <div class="dialog">
           <h1>下单通知</h1>
           <div class="diaLogCon">
             到店后，请在订单详情中将“到店验证码”提供给4S店的工作人员，在通过验证后即可获得对应金额的工时券
           </div>
           <div class="sure">
             <span @click="close">确定</span>
           </div>
        </div>
      </x-dialog>
  </div>
</template>

<script>
import {XHeader,XDialog} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name: 'Schedule',
  // 数据
  data () {
    return {
      msg: '分时优惠',
      pages: [],
      currentIndex: 0,
      allfenshiM: [],//所有分时优惠的店家信息
      orderTime: "",   //下单时间（2017-4-22）
      userId:'', //用户id
      showDiaLog:false  //工时费弹框
    }
  },
  // 创建
  created () {
    this.userId=getCookie('loginkey');//用户id
    // 分时优惠顶部的时间队列的产生，默认生产六天的
    var date=new Date();
    for(var i=-1;i<5;i++){
      var newDate=new Date(date.getTime()+i*24*60*60*1000);
      let obj={};
      let weekNum=newDate.getDay();
      let week;

      switch(weekNum){
        case 1:week="星期一"; break;
        case 2:week="星期二"; break;
        case 3:week="星期三"; break;
        case 4:week="星期四"; break;
        case 5:week="星期五"; break;
        case 6:week="星期六"; break;
        case 0:week="星期日"; break;
      }
      if(i==0){
        obj.week="今天";
      }else{
        obj.week=week;
      }
      obj.year=newDate.getFullYear();
      let month=newDate.getMonth()+1;
      month=month>=10?month:"0"+month;
      let day=newDate.getDate();
      day=day>=10?day:"0"+day;
      obj.time=month+"-"+day;
      this.pages.push(obj);
    }
    // 今天的时间
    let nowYear=date.getFullYear();
    let nowMonth=date.getMonth()+1;
    nowMonth=nowMonth>=10?nowMonth:"0"+nowMonth;
    let nowDay=date.getDate();
    nowDay=nowDay>=10?nowDay:"0"+nowDay;
    this.orderTime=nowYear+"-"+nowMonth+"-"+nowDay;
    this.getScheduleMess(nowYear,nowMonth,nowDay);//获取分时优惠数据
  },
  // 渲染
  mounted () {
    
  },
  // 导航离开该组件的对应路由时调用
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    this.$vux.loading.hide();
    next();
  },
  // 计算
  computed: {

  },
  // 方法
  methods: {
    //当点击顶部时间队列最后一个或者第一个的时候，就往时间队列中添加前一天或者后一天的时间
    selectTime(event,index,time,year){
      this.orderTime=year+"-"+time;
      this.currentIndex=index-1;
      let times=new Date(year+"-"+time);
      // 当点击到最后一个时自动向数组中添加后一天，同时删除数组中的第一个元素
      if(index>=5){
        var addTime=new Date(times.getTime()+1*24*60*60*1000);
        let obj={};
        let weekNum=addTime.getDay();
        let week;
        this.currentIndex--;
        switch(weekNum){
          case 1:week="星期一"; break;
          case 2:week="星期二"; break;
          case 3:week="星期三"; break;
          case 4:week="星期四"; break;
          case 5:week="星期五"; break;
          case 6:week="星期六"; break;
          case 0:week="星期日"; break;
        }
          obj.week=week;
          obj.year=addTime.getFullYear();
          let month=addTime.getMonth()+1;
          month=month>=10?month:"0"+month;
          let day=addTime.getDate();
          day=day>=10?day:"0"+day;
          obj.time=month+"-"+day;
          this.pages.push(obj);
          this.pages.shift();
          if((year==new Date().getFullYear())&&(time.split("-")[0]==(new Date().getMonth()+1))&&(time.split("-")[1]==new Date().getDate())){
            this.pages[index-1].week="今天";
          }
        }
        // 当点击第一个是自动向数组的头部添加当前天的前一天，同时删除数组中的最后一个元素
        if(index<=0){
          var subtractTime=new Date(times.getTime()-1*24*60*60*1000);
          let obj={};
          let weekNum=subtractTime.getDay();
          let week;
          this.currentIndex++;
          switch(weekNum){
            case 1:week="星期一"; break;
            case 2:week="星期二"; break;
            case 3:week="星期三"; break;
            case 4:week="星期四"; break;
            case 5:week="星期五"; break;
            case 6:week="星期六"; break;
            case 0:week="星期日"; break;
          }
          obj.week=week;
          obj.year=subtractTime.getFullYear();
          let month=subtractTime.getMonth()+1;
          month=month>=10?month:"0"+month;
          let day=subtractTime.getDate();
          day=day>=10?day:"0"+day;
          obj.time=month+"-"+day;
          this.pages.unshift(obj);
          this.pages.pop();
          if((year==new Date().getFullYear())&&(time.split("-")[0]==(new Date().getMonth()+1))&&(time.split("-")[1]==new Date().getDate())){
            this.pages[index+1].week="今天";
          }
        } 
        this.getScheduleMess(year,time.split('-')[0],time.split('-')[1])
    },
    getScheduleMess(year,month,day){
      let obj=JSON.parse(sessionStorage.getItem('scheduleMess'));
      // YEAR   MONTH   DAY
      obj.YEAR=year;
      obj.MONTH=month;
      obj.DAY=day;
      this.$vux.loading.show({
       text: ''
      });
      //获取分时优惠的所有数据
      this.$fetchPost('/cardWeb/getCardMTSchedule.action',{jsonParams:JSON.stringify(obj)}
        ).then(res=>{
        if(res.STATUS_CODE==1){
          this.$vux.loading.hide();
          this.allfenshiM=res.RESULT_DATA;
        }
      },err=>{
        console.log(err);
      })
    },
    //点击工时费时查看弹框
    workHours(){
      this.showDiaLog=true;
    },
    //下单操作
    downOrder(item,items){
      // items分时区段信息
      let that=this;
      if(!this.userId){
        this.$vux.confirm.show({
          title: '提示',
          content: '请先登录',
          onConfirm () {
            that.$router.push('/login');
          }
        })
        return;
      }
      let cardMess=JSON.parse(sessionStorage.getItem('cardMess'));
      let obj={};//订单支付时需要的数据
      obj.USER_ID=this.userId;//用户id
      obj.SHOP_NAME=item.SHOP_NAME;
      obj.CAR_NUMBER=cardMess.CARNUMBER;//车牌
      obj.HOUR_TOTAL_FEE=item.HOUR_TOTAL_FEE;//工时费
      obj.CAR_BRAND_NAME=cardMess.CARBRAND;// 车辆品牌信息，如：品牌_型号_款式
      obj.USERCARD_ID=cardMess.ID;// 车辆品牌信息，如：品牌_型号_款式
      obj.ORDER_LIST=[];
      let objs={}//订单数据
      objs.COMP_ID=item.COMP_ID;//商店id
      objs.CASH_VOL_NO='';//代金券号
      objs.SCHD_ID=items.SCHEDULE_DETAIL_ID;//分时优惠预约id
      objs.STARTTIME=items.STARTTIME;//开始时间
      objs.ENDTIME=items.ENDTIME;//结束时间
      objs.SERV_PARAMS=[];
      for(let i=0;i<item.sprayArray.length;i++){
        let objss={};//保养部位信息
        objss.SERV_ID=item.sprayArray[i].MAINTAIN_DETAIL_ID;
        objss.MT_DETAIL_NAME=item.sprayArray[i].MT_DETAIL_NAME;
        objss.ORIGINAL_PRICE=item.sprayArray[i].ORIGINAL_PRICE;
        objss.PRICE=item.sprayArray[i].PRICE;
        objss.QUANTITY=1;
        objss.MARK=0;
        objs.SERV_PARAMS.push(objss);
      }
      obj.ORDER_LIST.push(objs);
      //存储支付页面需要的信息 
      sessionStorage.removeItem('orderMess');
      sessionStorage.setItem('payMess',JSON.stringify(obj));
      localStorage.setItem('from','maintainCard');//代表支付来自保养
      localStorage.removeItem('fromOrder');//代表支付不是来自订单列表
      this.$router.push('/pay');
    },
    close(){
      this.showDiaLog=false;
    }
  },
  // 子组件
  components: {
    XHeader,
    XDialog
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.dialog{
  width: 6rem;
  padding:0.2rem 0.5rem;
  text-align: left;
  background: #fff;
  h1{
    font-size: 0.33rem;
    width: 5rem;
    padding-bottom: 0.3rem;
  }
  .diaLogCon{
    width: 5rem;
    font-size: 0.27rem;
  }
  .sure{
    width: 5rem;
    display: flex;
    justify-content: flex-end;
    padding: 0.1rem 0;
    span{
      font-size: 0.2rem;
      padding: 0 0.2rem;
      color: red;
    }
  }
}
h1, h2 {
  font-weight: normal;
  a{
    font-size:.16rem;
  }
}
ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 0.1rem;
}

a {
  color: #42b983;
}
.test{
  width:7.5rem;
  height:3rem;
  background:red;
  font-size:.5rem;
}
.favorable{
  width: 7.5rem;
  text-align: left;
  background: #ddd;
}
button{
  outline: medium;
}
 *{
    margin: 0;
    padding: 0;
  }
  a{
    text-decoration: none;
  }
  .navBar{
    background: #e42e3b;
    
    .allItem{
      width: 7rem;
      margin: 0 auto;
      height: 1.4rem;
      display: flex;
      overflow: hidden;
      flex-wrap:nowrap;
      padding: .2rem 0;
      text-align: center;
      color: #fff;
      font-size: .25rem;
      margin-top: -1px;
    .item{
      width: 1.14rem;
      height:1rem;
      line-height: .4rem;
      padding:.1rem 0;
      border-left: 1px solid rgba(255,255,255,.6);
      box-sizing: border-box;
    }
    .item:first-child{
      border-left: 0;
    }
    .active+.item{
      border-left: 0;
    }
    .active{
      width: 1.26rem;
      height:1.06rem;
      margin-top: -.15rem;
      line-height: .5rem;
      background: #fff;
      color: red;
      font-size: .3rem;
      font-weight: bold;
      border-radius: .2rem;
      border: .04rem solid #f0858d;
      box-sizing:content-box;
      //box-shadow: 0 0 40px #f0858d;
    }
    }
  }
 .header{
  position:fixed;
  top: 0;
  width: 7.5rem;
 }
 .allStore{
    padding-top: 2.19rem;
 }
  .Store{
    
      background: white;
      border-bottom:.22rem solid #eee;
      //box-shadow: 0 0 10px #ddd;
      box-sizing: content-box;
  }
  .Store:last-child{
     border-bottom: 0;
  }
  .storeMess{
    display: flex;
    padding: .29rem .10rem .29rem .29rem;
    height: 1.85rem;
    box-sizing: border-box;
    border-bottom: 1px solid #EEEEEE;
  }
  .storeMess img{
    height: 1.26rem;
    width: 1.26rem;
    min-width: 1.26rem;
    border-radius: .08rem;
  }
  .storeMess .storeIntro{
    width:5.6rem;
    margin: 0 .2rem 0 .2rem;
  }
  .storeMess .storeIntro h2{
    font-size: .3rem;
    margin-bottom: .1rem;
    font-weight: bold;
    color: #000;
  }
  .storeMess .storeIntro p.storeAddress{
    font-size: .24rem;
    margin: .1rem 0;
    color: #666;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .storeMess .storeIntro p.storePrice{
    color: #ec2121;
    font-size: .3rem;
    font-weight: bold;
    em{
      font-size: .23rem;
      font-style: normal;
      font-weight: bold;
    }
  }
  .storeMess .distance{
    width: 1.19rem;
    text-align: right;
    line-height: 1.5rem;
    font-size: .27rem;
    color: #b7b5b5;
  }
  .Store ul li{
    display: flex;
    height: 1rem;
    border-bottom: 1px solid #EEEEEE;
  }
  .Store ul li:last-child{
    border-bottom:0;
  }
  .Store ul li .timeMes{
    width: 80%;
    padding-left: .2rem;
    line-height: .5rem;
  }
  .Store ul li .timeMes p:only-child{
    line-height: 1rem;
  }
  .Store ul li .timeMes .time{
    font-size: .32rem;
    color: #333;
  }
  .Store ul li .timeMes .stock{
    font-size: .22rem;
    color: #999;
    margin-top: -.1rem;
    span{
      color:#ec2121;
      font-size: .3rem;
    }
  }
  .Store ul li .downOrder{
    width: 20%;
    text-align: center;
    line-height: .5rem;
  }
  .Store ul li .downOrder button{
    color: #FFFFFF;
    background: #ec2121;
    border-radius: .1rem;
    width: 1.16rem;
    height: .58rem;
    margin-top: .21rem;
    border: 0;
    font-size: .28rem;
  }
  .Store ul li .downOrder .past{
    background: #ddd;
    color: #fff;
  }
</style>
